﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="kener.linfeng@gmail.com">
    <title>ECharts · Example</title>

    <link rel="shortcut icon" href="../asset/ico/favicon.png">

    <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/carousel.css" rel="stylesheet">
    <link href="../asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="./www/js/echarts.js"></script>
    <script src="../asset/js/codemirror.js"></script>
    <script src="../asset/js/javascript.js"></script>

    <link href="../asset/css/codemirror.css" rel="stylesheet">
    <link href="../asset/css/monokai.css" rel="stylesheet">

    <style type="text/css">
        .CodeMirror {
            height: 550px;
        }
    </style>
</head>

<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


    <div class="container-fluid">
        <div class="row-fluid example">
            <div id="sidebar-code" class="col-md-4">
                <div class="well sidebar-nav">
                    <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                    <textarea id="code" name="code">
// 自定义扩展图表类型：mapType = body
require('echarts/util/mapData/params').params.baiduBuilding = {
    getGeoJson: function (callback) {
        $.ajax({
            url: "svg/baidu-building.svg",
            dataType: 'xml',
            success: function(xml) {
                callback(xml)
            }
        });
    }
}
option = {
    backgroundColor:'#eee',
    title : {
        text : '百度大厦',
        textStyle: {
            color: '#000'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    color: ['rgba(218, 70, 214, 1)', 'rgba(100, 149, 237, 1)', 'green'],
    legend: {
        data: ['嘿嘿', '高经', '会议室']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name: '嘿嘿',
            type: 'map',
            mapType: 'baiduBuilding',
            roam:true,
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data: [],
            geoCoord: {
                '叮叮': [39, 45],
                '小兑儿': [71, 45],
                '胡瑶': [195, 29],
                '祖明': [195, 44],
                '林峰': [195, 60],
                '安晨': [210, 44],
                '功': [210, 60],
                '立新': [144, 59],
                '诗才': [195, 71],
                '黄競': [210, 59],
                '浪宇': [150, 55],
                '晓青': [210, 71],
                '毅楠': [222, 59],
                '朝霞': [222, 71],
                '武琦': [231, 71],
                '严萍': [231, 46],
                '绍波': [231, 59],
                '开放': [488, 43],
                '兵兵': [488, 60],
                '孟珂': [522, 43],
                '辉耀': [522, 60],
                '佳璐': [488, 23],
                '新乐': [522, 23],
                '大佛': [165, 29],
                '周玉': [165, 44],
                '令君': [165, 60],
                '佳璐': [165, 71],
                'erik': [222, 44],
                '爽哥': [240, 60],
                '雷哥': [240, 44],
                '坤哥': [176, 59],
                '刚哥': [176, 71],
                '高经': [545, 54],
                '邱华': [468, 23],
                '饥渴难耐的辉辉': [473, 40],
                '大发': [500, 40],
                '淼童': [473, 60],
                '亚江': [500, 60],
                '莉姐': [530, 70],
                '红启': [570, 54],
                '五福降中天': [373, 173],
                'csfe': [500, 54],
                '得胜令': [253, 179],
                '西湖春': [496, 179],
                '望江南': [72, 203],
                '庆千秋': [86, 203],
                '过江龙': [289, 32],
                '天下乐': [289, 50],
                '万年欢': [687, 24],
                '浣溪沙': [637, 203],
                '清平乐': [649, 203],
                '四和春': [663, 203],
                '杏花天': [676, 203]
            },
            markPoint : {
                symbolSize : 3,
                data : [
                    {name: '叮叮'},
                    {name: '小兑儿'},
                    {name: '胡瑶'},
                    {name: '高经'},
                    {name: 'erik'},
                    {name: '祖明'},
                    {name: '林峰'},
                    {name: '坤哥'},
                    {name: '刚哥'},
                    {name: '爽哥'},
                    {name: '雷哥'},
                    {name: '邱华'},
                    {name: '淼童'},
                    {name: '亚江'},
                    {name: '莉姐'},
                    {name: '大发'},
                    {name: '饥渴难耐的辉辉'},
                    {name: '红启'},
                    {name: '安晨'},
                    {name: '功'},
                    {name: '立新'},
                    {name: '诗才'},
                    {name: '黄競'},
                    {name: '晓青'},
                    {name: '毅楠'},
                    {name: '浪宇'},
                    {name: '朝霞'},
                    {name: '严萍'},
                    {name: '武琦'},
                    {name: '绍波'},
                    {name: '开放'},
                    {name: '兵兵'},
                    {name: '孟珂'},
                    {name: '辉耀'},
                    {name: '佳璐'},
                    {name: '新乐'},
                    {name: '周玉'},
                    {name: '令君'},
                    {name: '佳璐'}
                ]
            },
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 20,
                    color: '#fff',
                    shadowBlur: 5
                },
                symbol: ['none'],
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid'
                        }
                    }
                },
                data : [
                    [
                        {name:'erik'}, 
                        {name:'胡瑶'}
                    ],
                    [
                        {name:'祖明'}, 
                        {name:'叮叮'}
                    ],
                    [
                        {name:'祖明'}, 
                        {name:'小兑儿'}
                    ]
                ]
            }
        },
        {
            name: '高经',
            type: 'map',
            mapType: 'baiduBuilding',
            roam:true,
            symbol: ['none'],
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data: [],
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 20,
                    color: '#fff',
                    shadowBlur: 5
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid'
                        }
                    }
                },
                data : [
                    [
                        {name:'高经'}, 
                        {name:'洗手间', geoCoord:[440, 179]}
                    ],
                    [
                        {name:'高经'}, 
                        {name:'洗手间', geoCoord:[637, 53]}
                    ],
                    [
                        {name:'高经'}, 
                        {name:'洗手间', geoCoord:[637, 179]}
                    ],
                    [
                        {name:'高经'},
                        {name:'洗手间', geoCoord:[307, 179]}
                    ]
                ]
            }
        },
        {
            name: '会议室',
            type: 'map',
            mapType: 'baiduBuilding',
            roam:true,
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[],
            markPoint : {
                symbol:'circle',
                symbolSize : 2,
                color: 'green',
                data : []
            },
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 20,
                    color: '#fff',
                    shadowBlur: 5
                },
                symbol: ['none'],
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid'
                        }
                    }
                },
                data : [
                    [
                        {name:'淼童'},
                        {name:'五福降中天'}
                    ],
                    [
                        {name:'大发'},
                        {name:'西湖春'}
                    ],
                    [
                        {name:'林峰'},
                        {name:'望江南'}
                    ],
                    [
                        {name:'莉姐'},
                        {name:'杏花天'}
                    ],
                    [
                        {name:'雷哥'},
                        {name:'过江龙'}
                    ],
                    [
                        {name:'毅楠'},
                        {name:'天下乐'}
                    ],
                    [
                        {name:'红启'},
                        {name:'万年欢'}
                    ],
                    [
                        {name:'亚江'},
                        {name:'浣溪沙'}
                    ],
                    [
                        {name:'爽哥'},
                        {name:'得胜令'}
                    ],
                    [
                        {name:'饥渴难耐的辉辉'},
                        {name:'万年欢'}
                    ]
                ]
            }
        },
        {
            type: 'map',
            mapType: 'baiduBuilding',
            data: [],
            markPoint: {
                symbol: 'emptyCircle',
                effect: {
                    show: true,
                    color: 'rgba(218, 70, 214, 1)'
                },
                data: [
                    {name: '叮叮'},
                    {name: '小兑儿'},
                    {name: '胡瑶'},
                    {name: '淼童'}
                ]
            }
        },
        {
            type: 'map',
            mapType: 'baiduBuilding',
            data: [],
            markPoint: {
                symbol: 'emptyCircle',
                effect: {
                    show: true,
                    color: 'rgba(100, 149, 237, 1)'
                },
                data: [
                    {name: '高经'}
                ]
            }
        },
        {
            type: 'map',
            mapType: 'baiduBuilding',
            data: [],
            markPoint: {
                symbol: 'emptyCircle',
                symbolSize : 15,
                effect: {
                    show: true,
                    color: 'green'
                },
                data: [
                    {name: '五福降中天'}
                ]
            }
        }
    ]
};
                    </textarea>
              </div><!--/.well -->
            </div><!--/span-->
            <div id="graphic" class="col-md-8">
                <div id="main" class="main" style="height: 530px;"></div>
                <div>
                    <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
                    <span class="text-primary">切换主题</span>
                    <select id="theme-select"></select>

                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
        </div><!--/row-->
        
    </div><!--/.fluid-container-->

    <footer id="footer"></footer>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
    <script src="../asset/js/bootstrap.min.js"></script>
    <script src="../asset/js/echartsExample.js"></script>
</body>
</html>
